<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title></title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="css/doctor.css" />
		<style type="text/css">
			html {
				height: 100%;
			}
			.van-tabs__nav {
				background: none;
			}
			.van-tab {
				font-size: 18px;
			}
			.van-tabs__line {
				background: #e22e30;
			}
			.div {
				margin-bottom: 3px;
			}
			.van-tabs__track {
				border-radius: 8px;
			}
			.mpl_item_right .div:last-of-type {
				margin-bottom: 0;
			}
			#app {
				overflow-y: scroll;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_container">
				<template v-if="type == '4'">
					<van-tabs v-model:active="active" @click="onClick">
						<van-tab
							v-for="(item1,index) in tab"
							:key="index"
							:title="item1.name"
						>
							<!--<van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
							<van-list
								class="list_box_100 doctor_box"
								v-if="detail&&detail.length>0"
								:immediate-check="false"
								v-model="loading"
								:finished="finished"
								:style="listsyle"
								@load="onLoad"
							>
								<div
									class="mpl_item"
									v-for="(item,index) in detail"
									@click="linkToPatient(item.patientId,item.doctorId)"
								>
									<div class="mpl_item_left">
										<img v-if="!item.patientsImg" src="img/logo.png" />
										<img v-if="item.patientsImg" :src="item.patientsImg" />
									</div>
									<div class="mpl_item_right">
										<div
											class="flex flex-align-center"
											style="
												margin-bottom: 5px;
												justify-content: space-between;
												position: relative;
											"
										>
											<div>
												<span
													class="fontsize16"
													v-if="item.patientsName&&item.patientsName.length>6"
													>{{item.patientsName.substring(0,6)}}...</span
												>
												<span class="fontsize16" v-else
													>{{item.patientsName}}</span
												>
												<span class="colora1" style="margin: 0 10px"
													>{{item.patientsAge}}岁</span
												>
												<div style="display: inline-block">
													<img v-if="item.patientsSex==1" src="img/man.png" />
													<img v-if="item.patientsSex==2" src="img/woman.png" />
												</div>
											</div>
											<div @click.stop="handleChat(item,index)">
												<img
													style="
														width: 0.5rem;
														height: 0.5rem;
														position: absolute;
														right: 0.92rem;
														top: 0;
													"
													src="img/chat.png"
												/>
											</div>
											<div @click.stop="handleCollected(item,index)">
												<img
													v-if="item.patientsCollected==2"
													style="width: 0.5rem; height: 0.5rem"
													src="img/collect.png"
												/>
												<img
													v-else
													src="img/uncollect.png"
													style="width: 0.5rem; height: 0.5rem"
												/>
											</div>
										</div>
										<div class="flex flex-align-center">
											<span class="colora1">起止时间：</span>
											<span
												>{{item.startTime&&item.startTime.replaceAll('-',
												'/')}}-{{item.endTime&&item.endTime.replaceAll('-',
												'/')}}</span
											>
										</div>
										<div class="flex flex-align-center">
											<span class="colora1">糖尿病类型：</span>
											<span>{{item.patientsDiabetesTypeName}}</span>
										</div>
										<div class="flex flex-align-center">
											<span class="colora1">确诊日期：</span>
											<span>{{item.patientsConfirmedDate}}</span>
										</div>
										<div>
											<span class="colora1">简要病史：</span>
											<span>{{item.patientsDescription}}</span>
										</div>
										<template v-if="item.recordValue">
											<div class="flex flex-align-center">
												<span class="colora1">{{item.recordName}}：</span>
												<span
													v-if="item.sugarStatus==2||item.sugarStatus==3"
													style="margin-right: 0.13rem; color: #e22e30"
													>{{item.recordValue}}mmol/L</span
												>
												<span v-else style="margin-right: 0.13rem"
													>{{item.recordValue}}mmol/L</span
												>
												<img
													v-if="item.sugarStatus==3"
													src="../patient/img/index/up.png"
												/>
												<img
													v-if="item.sugarStatus==2"
													src="../patient/img/index/down.png"
												/>
											</div>
											<div class="flex flex-align-center">
												<span class="colora1">测量日期：</span>
												<span>{{item.patientsRecordTime}}</span>
											</div>
										</template>
									</div>
									<div class="doctor_tag">
										责任医师：<span class="doctor_tag_name"
											>{{item.doctorName}}</span
										>
									</div>
								</div>
							</van-list>
							<van-empty
								v-else
								class="custom-image"
								style="margin-top: 200px"
								image="img/blank_pic.png"
								description="暂无患者"
							/>
						</van-tab>
						<!--</van-pull-refresh>-->
					</van-tabs>
				</template>
				<template v-else style="overflow-y: scroll; height: 100%">
					<van-list
						class="list_box_100 doctor_box"
						v-if="detail&&detail.length>0"
						v-model="loading"
						:finished="finished"
						:immediate-check="false"
						@load="onLoad"
						:offset="50"
					>
						<div
							class="mpl_item"
							v-for="(item,index) in detail"
							@click="linkToPatient(item.patientId,item.doctorId)"
						>
							<div class="mpl_item_left">
								<img v-if="!item.patientsImg" src="img/logo.png" />
								<img v-if="item.patientsImg" :src="item.patientsImg" />
							</div>
							<div class="mpl_item_right">
								<div
									class="flex flex-align-center"
									style="
										margin-bottom: 5px;
										justify-content: space-between;
										position: relative;
									"
								>
									<div>
										<span class="fontsize16" v-if="item.patientsName.length>6"
											>{{item.patientsName.substring(0,6)}}...</span
										>
										<span class="fontsize16" v-if="item.patientsName.length<=6"
											>{{item.patientsName}}</span
										>
										<span class="colora1" style="margin: 0 10px"
											>{{item.patientsAge}}岁</span
										>
										<div style="display: inline-block">
											<img v-if="item.patientsSex==1" src="img/man.png" />
											<img v-if="item.patientsSex==2" src="img/woman.png" />
										</div>
									</div>
									<div @click.stop="handleChat(item,index)">
										<img
											style="
												width: 0.5rem;
												height: 0.5rem;
												position: absolute;
												right: 0.92rem;
												top: 0;
											"
											src="img/chat.png"
										/>
									</div>
									<div @click.stop="handleCollected(item,index)">
										<img
											v-if="item.patientsCollected==2"
											style="width: 0.5rem; height: 0.5rem"
											src="img/collect.png"
										/>
										<img
											v-else
											src="img/uncollect.png"
											style="width: 0.5rem; height: 0.5rem"
										/>
									</div>
								</div>
								<div class="flex flex-align-center">
									<span class="colora1">起止时间：</span>
									<span
										>{{item.startTime&&item.startTime.replaceAll('-',
										'/')}}-{{item.endTime&&item.endTime.replaceAll('-',
										'/')}}</span
									>
								</div>
								<div class="flex flex-align-center">
									<span class="colora1">糖尿病类型：</span>
									<span>{{item.patientsDiabetesTypeName}}</span>
								</div>
								<div class="flex flex-align-center">
									<span class="colora1">确诊日期：</span>
									<span>{{item.patientsConfirmedDate}}</span>
								</div>
								<div>
									<span class="colora1">简要病史：</span>
									<span>{{item.patientsDescription}}</span>
								</div>
								<template v-if="item.recordValue">
									<div class="flex flex-align-center">
										<span class="colora1">{{item.recordName}}：</span>
										<span
											v-if="item.sugarStatus==2||item.sugarStatus==3"
											style="margin-right: 0.13rem; color: #e22e30"
											>{{item.recordValue}}mmol/L</span
										>
										<span v-else style="margin-right: 0.13rem"
											>{{item.recordValue}}mmol/L</span
										>
										<img
											v-if="item.sugarStatus==3"
											src="../patient/img/index/up.png"
										/>
										<img
											v-if="item.sugarStatus==2"
											src="../patient/img/index/down.png"
										/>
									</div>
									<div class="flex flex-align-center">
										<span class="colora1">测量日期：</span>
										<span>{{item.patientsRecordTime}}</span>
									</div>
								</template>
							</div>
							<div class="doctor_tag">
								责任医师：<span class="doctor_tag_name"
									>{{item.doctorName}}</span
								>
							</div>
						</div>
					</van-list>
					<van-empty
						v-else
						class="custom-image"
						style="margin-top: 200px"
						image="img/blank_pic.png"
						description="暂无患者"
					/>
				</template>
			</div>
			<div
				v-if="detail&&detail.length>0"
				style="
					margin-bottom: 25px;
					color: #a1a1a1;
					text-align: center;
					font-size: 16px;
				"
			>
				当前页共{{detail.length}}名
			</div>

			<link-index></link-index>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js?time=202208241057"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'
		import { throttle } from '../fileSetting/js/utils.js'

		const PatientData = {
			data() {
				return {
					url: {
						getManageDetail: '/doctor/patient/group/list',
						getServiceDetail: '/doctor/patient/package/list',
						getChatRoom: '/100/12/1001209',
					},
					tab: [],
					doctorId: '',
					detail: [],
					active: 0,
					type: '',
					orgCode: '',
					chatroomId: '',
					tab: [
						{
							dataId: 1,
							name: '已绑定血糖仪',
						},
						{
							dataId: 2,
							name: '未绑定血糖仪',
						},
					],
					page: 1,
					pageSize: 10,
					groupId: 0,
					total: 0,
					finished: false,
					loading: false,
					refreshing: false,
					listsyle: {
						width: '',
					},
				}
			},
			created() {
				this.doctorId = url('?id')
				this.type = url('?type')
				this.orgCode = sessionStorage.getItem('orgCode')
				this.handleGetManageDetail()
			},
			methods: {
				handleGetManageDetail(onLoad) {
					postAction(spliceUrl('/100/12/1001211'), {
						doctorId: this.doctorId,
						type: +this.type,
						subType: this.type == 4 ? this.tab[this.active].dataId : '',
						pageNum: this.page,
						pageSize: 5,
					}).then(res => {
						res = res.data
						console.log('handleGetManageDetail', res)
						if (res.success) {
							this.loading = false
							if (res.result && res.result.records.length > 0) {
								if (onLoad) {
									this.detail = [...this.detail, ...res.result.records]
								} else {
									this.detail = res.result.records
								}
								this.total = res.result.total
								if (this.detail.length == this.total) {
									this.finished = true
								}
								console.log('detail', this.detail)
							} else {
								if (this.page == 1) {
									this.detail = []
								}
							}
						} else {
							console.log(res.message)
						}
					})
				},
				handleCollected(item, index) {
					const params = {
						doctorId: this.doctorId,
						orgCode: this.orgCode,
						patientId: item.patientId,
						patientsCollected: item.patientsCollected == 2 ? 1 : 2,
					}
					postAction(spliceUrl('/100/12/1001210'), params).then(res => {
						res = res.data
						if (res.success) {
							this.detail[index].patientsCollected = params.patientsCollected
						}
					})
				},
				onClick(index) {
					this.detail = []
					this.active = index
					this.page = 1
					this.loading = false
					this.finished = false
					this.handleGetManageDetail()
				},
				linkToPatient(id, did) {
					sessionStorage.setItem('chatDid', did)
					window.location.href = '../patient/index.html?userid=' + id
				},
				async handleChat(item) {
					await this.getDoctorPaient(item.patientId, item.doctorId)
				},
				getDoctorPaient(patientId, doctorId) {
					getAction(spliceUrl(this.url.getChatRoom), {
						patientId,
						doctorId,
					}).then(res => {
						res = res.data
						console.log(res)
						if (res.success) {
							this.chatroomId = res.result
							window.location.href = `https://qywechat.dtx-tech.com/chatroom?client=doctor&userid=${this.doctorId}&roomid=${this.chatroomId}`
						}
					})
				},
				onLoad: throttle(function () {
					this.page++
					this.handleGetManageDetail(1)
					console.log(this.finished)
				}, 300),
			},
			components: {
				linkIndex: linkIndex,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
